<template>
    <div>
        <el-dialog title="产品选择" v-model="props.productVisible" width="60%" @close="productCancel" @open="handleOpen">
            <el-form :model="form">
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item label="产品编码">
                            <el-input v-model="form.productCode" placeholder="请输入产品编码"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="产品名称">
                            <el-input v-model="form.productName" placeholder="请输入产品名称"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-button type="primary" :icon="Search" @click="search">搜索</el-button>
                        <el-button :icon="Refresh" @click="formReset">重置</el-button>
                    </el-col>
                </el-row>
            </el-form>
            <el-table :data="productData" highlight-current-row @row-click="handleCurrentProduct">
                <el-table-column label="产品编码" prop="materialProductCode"></el-table-column>
                <el-table-column label="产品名称" prop="productName"></el-table-column>
                <el-table-column label="规格型号" prop="specificationAndModel"></el-table-column>
            </el-table>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="productCancel">取消</el-button>
                    <el-button type="primary" @click="productConfirm">
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Search, Refresh } from '@element-plus/icons-vue'
import { findProduct } from '@/apis/index'
const form = ref({
    productCode: null,
    productName: null,
})
const productData = ref([])
const product = ref({})
const props = defineProps({
    productVisible: Boolean,
    index: Number
})


const emits = defineEmits(['productSelect'])

const search = () => { } //参数搜索
const formReset = () => { } //重置参数表单

//取消选择产品
const productCancel = () => {
    product.value = {}
    emits('productSelect', product.value,props.index)
}
//确认选择产品
const productConfirm = () => {
    emits('productSelect', product.value,props.index)
}

//选择产品
const handleCurrentProduct = (row) => {
    product.value = { ...row }
}
//打开弹窗,重置数据
const handleOpen = () => {
    form.value = {
        productCode: null,
        productName: null
    }
    product.value = {}
}

onMounted(async () => {
    productData.value = await findProduct()
})


</script>

<style scoped></style>
